<template>
  <div class="why-exhibit">
    <div
      class="page-header"
      :style="bannerImage ? { backgroundImage: `url(${bannerImage})` } : {}"
      :class="{ 'has-bg': !!bannerImage }"
    >
      <div class="container">
        <h1 class="page-title">{{ "为何参展" }}</h1>
        <p class="page-subtitle">
          {{ pageData.subtitle || "了解参展的价值和优势" }}
        </p>
      </div>
    </div>
    <!-- 导航菜单 -->
    <div class="nav-menu">
      <div class="container">
        <nav class="about-nav">
          <a
            @click="setActiveTab('why-exhibit')"
            :class="['nav-item', { active: activeTab === 'why-exhibit' }]"
          >
            为何参展
          </a>
          <a
            @click="setActiveTab('who-exhibits')"
            :class="['nav-item', { active: activeTab === 'who-exhibits' }]"
          >
            谁来观展
          </a>
          <a
            @click="setActiveTab('exhibit-registration')"
            :class="[
              'nav-item',
              { active: activeTab === 'exhibit-registration' },
            ]"
          >
            参展报名
          </a>
          <!-- <a
            @click="setActiveTab('exhibitor-system')"
            :class="['nav-item', { active: activeTab === 'exhibitor-system' }]"
          >
            展商系统
          </a> -->
          <a
            @click="setActiveTab('exhibitor-services')"
            :class="[
              'nav-item',
              { active: activeTab === 'exhibitor-services' },
            ]"
          >
            展商服务
          </a>
          <a
            @click="setActiveTab('exhibitor-reviews')"
            :class="['nav-item', { active: activeTab === 'exhibitor-reviews' }]"
          >
            展商评语
          </a>
        </nav>
      </div>
    </div>

    <div class="container">
      <section class="why-section">
        <!-- <h2 class="section-title">{{ pageData.title || "为何参展" }}</h2>
        <p v-if="pageData.description" class="section-desc">
          {{ pageData.description }}
        </p> -->

        <!-- 多条数据展示：图片在上，文本在下 -->
        <div class="reasons-grid">
          <div
            class="reason-item"
            v-for="reason in whyExhibit"
            :key="reason.id"
          >
            <!-- 图片在上 -->
            <div class="reason-image-section" v-if="reason.image">
              <img
                :src="reason.image"
                :alt="reason.title"
                class="reason-image"
              />
            </div>
            <!-- 文本在下 -->
            <div class="reason-content">
              <div v-html="reason.description" class="reason-text"></div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import {
  Star,
  Connection,
  Trophy,
  TrendCharts,
  User,
  Document,
} from "@element-plus/icons-vue";
import { subpageApi } from "@/api/user";

export default {
  name: "WhyExhibit",
  setup() {
    const activeTab = ref("why-exhibit");
    const pageData = ref({});
    const bannerImage = ref("");
    const whyExhibit = ref([]);

    // 默认为何参展数据 - 仅作为API失败时的fallback
    const defaultWhyExhibit = [];

    // 获取图标组件
    const getIconComponent = (iconName) => {
      const iconMap = {
        Star: Star,
        Connection: Connection,
        Trophy: Trophy,
        TrendCharts: TrendCharts,
        User: User,
        Document: Document,
      };
      return iconMap[iconName] || Star;
    };

    // 解析富文本内容
    const parseContent = (content) => {
      if (!content) return { content: "", backgroundImage: "" };

      try {
        if (typeof content === "string" && content.trim().startsWith("{")) {
          return JSON.parse(content);
        }
        return { content: content, backgroundImage: "" };
      } catch (e) {
        return { content: content, backgroundImage: "" };
      }
    };

    // 获取默认图标
    const getDefaultIcon = (index) => {
      const icons = [
        "Star",
        "Connection",
        "Trophy",
        "TrendCharts",
        "User",
        "Document",
      ];
      return icons[index % icons.length];
    };

    const loadPageData = async () => {
      try {
        const response = await subpageApi.getSubpageList(
          "exhibitors",
          "why-exhibit"
        );
        if (
          response &&
          response.code === "200" &&
          response.data &&
          response.data.length > 0
        ) {
          // 取第一条作为页面基本信息
          const firstItem = response.data[0];
          pageData.value = {
            ...firstItem,
            description:
              firstItem.description ||
              (firstItem.content &&
              !(firstItem.content || "").trim().startsWith("[") &&
              !(firstItem.content || "").trim().startsWith("{")
                ? firstItem.content
                : ""),
          };

          // 处理多条数据
          whyExhibit.value = response.data.map((item, index) => {
            const parsed = parseContent(item.content);
            return {
              id: item.id || index + 1,
              title: item.title || "",
              description: parsed.content || "",
              icon: item.icon || getDefaultIcon(index),
              image: item.imageUrl || parsed.backgroundImage || "",
            };
          });
        } else {
          // 使用默认数据
          pageData.value = getDefaultPageData();
          whyExhibit.value = getDefaultWhyExhibit();
        }
      } catch (error) {
        console.error("加载为何参展数据失败:", error);
        pageData.value = getDefaultPageData();
        whyExhibit.value = getDefaultWhyExhibit();
      }
    };

    // 获取默认的为何参展数据
    const getDefaultWhyExhibit = () => {
      return [
        {
          id: 1,
          title: "行业权威平台",
          description:
            "<p>华南地区最具影响力的工业展览会，汇聚行业顶尖企业，为参展商提供权威的展示平台。</p>",
          icon: "Trophy",
          image:
            "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=400&h=300&fit=crop",
        },
        {
          id: 2,
          title: "专业观众群体",
          description:
            "<p>50,000+专业观众，涵盖制造业各领域决策者，为参展商提供精准的目标客户群体。</p>",
          icon: "User",
          image:
            "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=300&fit=crop",
        },
        {
          id: 3,
          title: "前沿技术展示",
          description:
            "<p>展示最新工业4.0、智能制造、数字化转型技术，引领行业发展潮流。</p>",
          icon: "Setting",
          image:
            "https://images.unsplash.com/photo-1565043589221-1a6fd9a6d0b8?w=400&h=300&fit=crop",
        },
        {
          id: 4,
          title: "国际交流合作",
          description:
            "<p>国际化展会平台，促进中外企业交流合作，拓展国际市场机会。</p>",
          icon: "Connection",
          image:
            "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=300&fit=crop",
        },
        {
          id: 5,
          title: "优质服务支持",
          description:
            "<p>专业团队提供全方位展会服务支持，确保参展商获得最佳参展体验。</p>",
          icon: "Star",
          image:
            "https://images.unsplash.com/photo-1551434678-e076c223a692?w=400&h=300&fit=crop",
        },
        {
          id: 6,
          title: "商业合作机会",
          description:
            "<p>创造更多商业合作机会，助力企业发展，实现互利共赢。</p>",
          icon: "Trophy",
          image:
            "https://images.unsplash.com/photo-1559136555-9303baea8ebd?w=400&h=300&fit=crop",
        },
      ];
    };

    const setActiveTab = (tabKey) => {
      if (!tabKey) return;
      activeTab.value = tabKey;
      // 跳转到对应的子页面
      if (tabKey !== "why-exhibit") {
        window.location.href = `/${tabKey}`;
      }
    };

    const loadBanner = async () => {
      try {
        const resp = await subpageApi.getContentByType("carousel_exhibitors");
        if (
          resp &&
          resp.code === "200" &&
          Array.isArray(resp.data) &&
          resp.data.length
        ) {
          const first =
            resp.data.find((it) => it.status === "active") || resp.data[0];
          const content =
            typeof first.content === "string"
              ? JSON.parse(first.content || "{}")
              : first.content || {};
          bannerImage.value = first.imageUrl || content.image || "";
        }
      } catch (e) {
        bannerImage.value = "";
      }
    };

    onMounted(() => {
      loadPageData();
      loadBanner();
    });

    return {
      activeTab,
      pageData,
      bannerImage,
      whyExhibit,
      getIconComponent,
      setActiveTab,
    };
  },
};
</script>

<style scoped>
.why-exhibit {
  min-height: 100vh;
  background: #f8f9fa;
}

:deep(.resizable-image) {
  max-width: 100% !important;
  height: auto !important;
}

.page-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 120px 0 80px 0;
  margin-top: 0;
  text-align: center;
  color: white;
}

.page-header.has-bg {
  height: 400px;
  position: relative;
  background: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page-header.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.page-header.has-bg .container {
  position: relative;
  z-index: 1;
}

.page-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.page-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.why-section {
  background: white;
  border-radius: 20px;
  padding: 3rem;
  margin: 2rem 0;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 2rem;
  color: #333;
  margin-bottom: 2rem;
  text-align: center;
}

.section-desc {
  margin: -8px 0 2rem;
  color: #666;
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.6;
}

/* 多条数据网格布局 */
.reasons-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  /* margin-top: 2rem; */
}

.reason-item {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20px;
}

.reason-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* 图片在左 */
.reason-image-section {
  width: 300px;
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
  margin-right: 30px;
  border-radius: 8px;
}

.reason-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #f8f9fa;
  transition: transform 0.3s ease;
}

.reason-image:hover {
  transform: scale(1.05);
}

/* 文本在右 */
.reason-content {
  flex: 1;
  max-width: 100%;
  padding: 0;
}

.reason-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1rem;
  text-align: center;
}

.reason-text {
  color: #666;
  line-height: 1.6;
  text-align: left;
}

/* 富文本内图片限制 */
.reason-text :deep(img) {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px 0;
  border-radius: 8px;
}

.section-image {
  width: 100%;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.section-image.small {
  max-width: 520px; /* 接近一行文字宽度 */
}
.section-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px; /* 限制高度，保持完整显示 */
  object-fit: contain; /* 按容器显示完整 */
  background: #fff;
}

@media (max-width: 768px) {
  .why-section {
    padding: 2rem;
    margin: 1rem 0;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .section-layout {
    grid-template-columns: 1fr; /* 移动端上下布局 */
  }

  .why-exhibit {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .reason-item {
    flex-direction: column;
    text-align: center;
  }

  .reason-image-section {
    width: 100%;
    height: 250px;
    margin-right: 0;
    margin-bottom: 20px;
  }

  .reason-content {
    text-align: center;
  }

  .page-title {
    font-size: 2rem;
  }

  .page-subtitle {
    font-size: 1rem;
  }
}

/* 导航菜单样式 - 参考关于我们页面 */
.nav-menu {
  background: #f8f9fa;
  padding: 20px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.about-nav {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.nav-item {
  text-decoration: none;
  color: #333;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 8px;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: 1px solid #eee;
  cursor: pointer;
}

.nav-item:hover {
  background-color: var(--e-global-color-selected);
  color: white;
  border-color: var(--e-global-color-selected);
}

.nav-item.active {
  background-color: var(--e-global-color-selected);
  color: white;
  border-color: var(--e-global-color-selected);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .about-nav {
    gap: 15px;
  }

  .nav-item {
    font-size: 1rem;
    padding: 8px 16px;
  }
}
</style>
